<template>
  <el-container>
      <el-aside width="200px">
          <!-- 菜单开始 -->
        <el-menu :default-openeds="['1']">
          <img src="./assets/logo.png" alt="">
            <!-- 次级菜单 -->
            <el-menu-item index="4">
                <el-icon><Odometer/></el-icon>
                仪表盘
                </el-menu-item>
            <el-sub-menu index="1">
              
            <template #title>
                <el-icon><Menu /></el-icon>常用设置
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="1-1">教师管理</el-menu-item>
                <el-menu-item index="1-2">学生管理</el-menu-item>
                <el-menu-item index="1-3">公告管理</el-menu-item>
                <el-menu-item index="1-4">系统配置</el-menu-item>
                <el-menu-item index="1-5">判断服务器</el-menu-item>
            </el-menu-item-group>
            <!-- 次级菜单中的次级菜单 -->
            
        </el-sub-menu>
                    <el-sub-menu index="2">
              
            <template #title>
                <el-icon><Aim /></el-icon>问题
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="1-1">问题列表</el-menu-item>
                <el-menu-item index="1-2">增加题目</el-menu-item>
                <el-menu-item index="1-3">导入导出题目</el-menu-item>
            </el-menu-item-group>
            <!-- 次级菜单中的次级菜单 -->
            
        </el-sub-menu>
                    <el-sub-menu index="3">
              
            <template #title>
                <el-icon><Trophy /></el-icon>比赛&练习
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="1-1">比赛列表</el-menu-item>
                <el-menu-item index="1-2">创建比赛</el-menu-item>
            </el-menu-item-group>
            <!-- 次级菜单中的次级菜单 -->
            
        </el-sub-menu>
                    <el-sub-menu index="4">
              
            <template #title>
                <el-icon><Collection /></el-icon>课程
            </template>
            <!-- 次级菜单项 -->
            <el-menu-item-group>
                <el-menu-item index="1-1">课程列表</el-menu-item>
                <el-menu-item index="1-2">创建课程</el-menu-item>
            </el-menu-item-group>
            <!-- 次级菜单中的次级菜单 -->
            
        </el-sub-menu>
           
                
        </el-menu>
      </el-aside>
      <el-container>
        <el-header><h3>第一个使用布局的页面</h3></el-header>
        <el-main><p>这里是主体内容，可以使用组件，也可以写html</p></el-main>
        <el-footer>
            web前端开发实战课程版权所有
            <el-button circle type="info" @click="open">
                <el-icon><InfoFilled /></el-icon>
            </el-button>
            </el-footer>
      </el-container>
    </el-container>
</template>

<script>

import { Odometer,Aim,Menu,Trophy,Collection,InfoFilled } from '@element-plus/icons-vue'
export default {
     components:{
        Odometer,
        Aim,
        Menu,
        Trophy,
        Collection,
        InfoFilled
       
    },
}
</script>

<style>
.el-header, .el-footer{
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 20px;
}
.el-aside{
    background-color: #d3dce6;
    text-align: center;
    line-height: 200px;
}
.el-main{
    background-color: #e9eef3;
    text-align: center;
}
</style>
